*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: "poppins";
    font-size: 62.5%;
}
body{
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

/** Loading wrapper */



/** Desktop */

/** top-container */

.top-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:row;
    width: 100%;
    height: 30vh;
    margin-bottom: 10vh;
}
.top-container h1{
    font-size: 5rem;
    text-transform: uppercase;
    border-bottom: 1.4rem solid #006EC7;
}
.top-container h2{
    display: flex;
    margin-top: 10%;
    font-size: 1.6rem;
}
.menytext{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex: 1;
}
.utfyllnad{
  flex: 1;
  height: 100%;
}

/**? kött-info */

.kött{
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}
.kött img{
  width: 18vw;
}

/** Landing */

.landing{
    display: flex;
    justify-content: center;
    flex-direction: row;
    width: 90vw;
    margin: auto;

}
.landing img{
  margin-bottom: 3vh;
}

/** Left-container */

.left-container{
    margin-right: 4vw;
}
.standard-grupp-1{
  display: flex;
  width: 22vw;
  height: 45vh;
  justify-content: left;
  border-bottom: 0.2rem solid black;
  padding-bottom: 1vh;
}
.standard-grupp-2{
  display: flex;
  justify-content: left;
  width: 22vw;
  height: 66vh;
  border-bottom: 0.2rem solid black;
  padding-bottom: 1vh;
  margin-top: 4vh;
}
.kebabpizza{
  display: flex;
  justify-content: left;
  width: 24vw;
  height: 69vh;
  margin-top: 4vh;
}

/** Middle-container */

.kycklingpizzor{
  display: flex;
  justify-content: left;
  width: 24vw;
  height: 32vh;
  border-bottom: 0.2rem solid black;
  padding-bottom: 1vh;
}
.fläskfilépizzor{
  display: flex;
  justify-content: left;
  width: 24vw;
  height: 30vh;
  border-bottom: 0.2rem solid black;
  padding-bottom: 1vh;
  margin-top: 4vh;
}
.fläskfilépizzor img{
  width: 22vw;
}
.mexikanska-pizzor{
  display: flex;
  justify-content: left;
  width: 24vw;
  height: 42vh;
  border-bottom: 0.2rem solid black;
  padding-bottom: 1vh;
  margin-top: 4vh;
}
.oxfilépizzor{
  display: flex;
  justify-content: left;
  width: 24vw;
  height: 48vh;
  margin-top: 4vh;
}

/** Right-container */

.right-container{
  margin-left: 4vw;
}
.inbakade-pizzor{
  display: flex;
  justify-content: left;
  width: 24vw;
  height: 46vh;
  border-bottom: 0.2rem solid black;
  padding-bottom: 1vh;
}
.mozzarellapizzor{
  display: flex;
  justify-content: left;
  width: 24vw;
  height: 34vh;
  border-bottom: 0.2rem solid black;
  padding-bottom: 1vh;
  margin-top: 4vh;
}
.specialpizzor{
  display: flex;
  justify-content: left;
  width: 24vw;
  height: 100vh;
  padding-bottom: 1vh;
  margin-top: 4vh;
}

/** Footer */

footer{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30vh;
  width: 100%;
}
.bilder{
  display: flex;
  justify-content: center;
  justify-content: space-between;
  align-items: center;
  height: 20vh;
  width: 80%;
}
.bilder img{
  height: 20vh;
  border-radius: 0.1rem;
}
.tillbehör img{
  height: 30vh;
}

.spinner {
  margin: 100px auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: white;
  height: 100%;
  width: 6px;
  display: inline-block;
  
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

.loading-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    position: absolute;
    background-color: #006EC7;
    z-index: 10000;
}




/** Responsive */

@media screen and (max-width: 1500px){
.utfyllnad{
  display: none;
}
  .bilder img{
  height: 10vh;
  }
  .right-container{
    flex: 1;
  }
  .middle-container{
    flex: 1;
  }
  .left-container{
    flex: 1;
  }
  .fläskfilépizzor img{
    width: 30vw;
  }
  .top-container{
    flex-direction: column;
    height: 50vh;
  }
  .kött{
    width: 100%;
    height: 30vh;
  }
  .kött img{
    width: 24vw;
  }
  .menytext{
    width: 100%;
    height: 20vh;
  }
}

@media screen and (max-width: 1200px){
  .kött{
    position: unset;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    height: 16vh;
    margin-top: 4vh;
  }
  .top-container{
    height: 40vh;
    margin-bottom: 12vh;
    flex-direction: column;
  }
  .landing img{
    margin-left: 4vw;
  }
  .menytext{
    margin-top: 4vh;
  }
}


@media screen and (max-width: 500px){

  .kött img{
    width: 60vw;
  }
  .menytext{
    height: 30vh;
  }
  .top-container{
    height: 50vh;
  }
  .landing{
    flex-direction: column;
  }
  .top-container h2{
    font-size: 1.2rem;
  }
  .standard-grupp-1{
    width: 100%;
  }
  .standard-grupp-1 img{
    width: 70vw;
  }
  .standard-grupp-2{
    width: 100%;
  }
  .standard-grupp-2 img{
    width: 70vw;
  }
  .kebabpizza{
    width: 100%;
    border-bottom: 0.2rem solid black;
  }
  .kebabpizza img{
    width: 77vw;
  }
  .kycklingpizzor{
    width: 100%;
    margin-top: 4vh;
  }
  .kycklingpizzor img{
    width: 78vw;
  }
.fläskfilépizzor{
  width: 100%;
}
.fläskfilépizzor img{
  width: 73vw;
}
.mexikanska-pizzor{
  width: 100%;
}
.mexikanska-pizzor img{
  width: 78vw;
}
.oxfilépizzor{
  width: 100%;
  border-bottom: 0.2rem solid black;
}
.oxfilépizzor img{
  width: 81vw;
}
.column-right{
  width: 80%;
}
.inbakade-pizzor{
  width: 100%;
  margin-top: 4vh;
}
.inbakade-pizzor img{
  width: 75vw;
}
.mozzarellapizzor{
  width: 100%;
}
.mozzarellapizzor img{
  width: 74vw;
}
.specialpizzor{
  width: 100%;
}
.specialpizzor img{
  width: 83vw;
}
footer{
  display: none;
}
}